<template>
	<view class="wrap">
		<view class="top">
			<view class="search">
				<input type="text" v-model="keywords" placeholder="请输入工人姓名">
				<uni-icons @click="init" type="search" color="#bababa" size="20"></uni-icons>
			</view>
		</view>
		<view class="list">
			<checkbox-group @change="checkboxChange">
				<view class="col" v-for="item in list" :key="item.work_no">
					<checkbox style="transform: scale(0.9);" :value="item.work_no" :checked="item.checked" />
					<block class="item">
						<image :src="item.avatar" mode="" @click="goDetail(item)"></image>
						<view class="text" :class="{'isManage':isManage}" @click="goDetail(item)">
							<view class="name">
								{{item.nickname}}
							</view>
							<view class="time">
								最近登录:
								<text v-if="item.prevtime">
									{{item.prevtime}}
								</text>
								<text v-else> 无</text>
							</view>
						</view>
						<view class="post" @click="goDetail(item)">
							积分值
							<text>{{item.score}}</text>
						</view>
					</block>
				</view>
			</checkbox-group>
		</view>
		<uni-load-more :status="status"></uni-load-more>
		<view class="bottom">
			<view class="submitBtn" @click="confirm">
				确认选择
			</view>
		</view>
		<view class="seat">

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				page: 1,
				status: "no-more",
				type: null,
				keywords: ''
			}
		},
		onLoad(option) {
			this.type = option.type
			if (this.type == 'add') {
				uni.setNavigationBarTitle({
					title: "加分"
				})
			} else {
				uni.setNavigationBarTitle({
					title: "减分"
				})
			}

		},
		onShow() {
			this.init()
		},
		onPullDownRefresh() {
			this.init()
		},
		onReachBottom() {
			this.page++
			this.getList()
		},
		computed: {
			isAll() {
				return this.list.every(item => item.checked)
			}
		},
		methods: {
			init() {
				this.list = []
				this.page = 1
				this.getList()
			},
			getList() {
				this.status = "loading"
				this.$post("/worker/worker_data", {
					page: this.page,
					keywords: this.keywords
				}).then(res => {
					this.status = "no-more"
					uni.stopPullDownRefresh()
					res.data.data.forEach(item => {
						item.checked = false
						this.list.push(item)
					})
				})
			},
			checkboxChange(e) {
				var values = e.detail.value;
				this.list.forEach(item => {
					if (values.includes(item.work_no)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				})
			},
			changeAll() {
				this.isAll = !this.isAll
				this.list.forEach(item => {
					item.checked = this.isAll
				})
			},
			goDetail(item) {
				uni.navigateTo({
					url: `./detail?work_no=${item.work_no}&name=${item.nickname}&length=1&type=${this.type}`
				})
			},
			confirm() {
				var numList = [],
					nameList = []
				this.list.forEach(item => {
					if (item.checked) {
						numList.push(item.work_no)
						nameList.push(item.nickname)
					}
				})
				const work_no = numList.join(',')
				const name = nameList.join('，')
				if (numList.length == 0) {
					this.$toast("请选择工人")
				} else {
					uni.navigateTo({
						url: `./detail?work_no=${work_no}&name=${name}&length=${numList.length}&type=${this.type}`
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.top {
		padding: 40rpx 0;

		.search {
			height: 60rpx;
			line-height: 60rpx;
			background: #FFFFFF;
			border: 1rpx solid #E1E1E1;
			border-radius: 30px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;

			input {
				font-size: 28rpx;
				width: calc(100% - 40rpx);
			}
		}

		.manage {
			color: $main-color;
		}
	}

	.list {
		.col {
			padding: 24rpx 0;
			border-bottom: 1rpx solid #e2e2e2;
			display: flex;
			align-items: center;
			justify-content: space-between;

			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}

			.text {
				width: calc(100% - 300rpx);

				.name {
					font-size: 30rpx;
					margin-bottom: 16rpx;
				}

				.time {
					font-size: 24rpx;
					color: #797979;
				}
			}

			.isManage {
				width: calc(100% - 310rpx);
			}

			.post {
				max-width: 150rpx;
				font-size: 22rpx;
				border-radius: 50px;
				padding: 0 16rpx;
				color: $main-red;
				text-align: center;

				text {
					display: block;
					font-size: 34rpx;
				}
			}
		}
	}

	/* ifdef MP-WEIXIN */
	/*checkbox选中后样式  */
	checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		border: 2rpx solid $main-color !important;
		background-color: $main-color !important;
		color: #FFFFFF !important;
	}

	/*checkbox选中后图标样式  */
	checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
		color: #FFFFFF !important;
	}

	/* endif */

	.bottom {
		position: fixed;
		width: 100%;
		background-color: #fff;
		height: 100rpx;
		padding: 0 40rpx;
		bottom: 0;
		left: 0;

	}

	.seat {
		height: 100rpx;
	}
</style>